<template>
  <div class="categoryList">
    <!-- 顶部导航 -->
    <van-nav-bar title="网易严选" :fixed="true" :placeholder="true">
      <template #left>
        <van-icon name="wap-home-o" size="32" @click="toHome" />
      </template>
      <template #right>
        <van-icon name="search" size="32" @click="toSearch" />
        <van-icon name="shopping-cart-o" size="32" @click="cart" />
      </template>
    </van-nav-bar>
    <!-- 分类菜单导航 -->
    <van-tabs
      class="topNav"
      v-model="activeKey"
      @change="onChange"
      :line-width="40"
      :line-height="1"
      :border="true"
      :sticky="true"
      :title-active-color="originred"
    >
      <van-tab
        v-for="item in subCateList.categoryL2List"
        :title="item.name"
        :key="item.id"
      >
      </van-tab>
    </van-tabs>
    <!-- 标题 -->
    <div class="title">{{ subCateList.categoryItems.category.name }}</div>
    <!-- 商品列表 -->
    <van-row class="mainlist" type="flex" gutter="10">
      <van-col
        span="12"
        v-for="item in subCateList.categoryItems.itemList"
        :key="item.id"
      >
        <van-image :src="item.listPicUrl" class="subImg" radius="10px" />

        <van-card
          :price="item.retailPrice"
          :title="item.name"
          :origin-price="item.counterPrice"
        />
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { reqSubCateList } from "@/api";

export default {
  name: "Categorylist",
  data() {
    return {
      subCategoryId: "",
      categoryId: "",
      subCateList: {},
      activeKey: 0,
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(value) {
        this.subCategoryId = value.query.subCategoryId;
        this.categoryId = value.query.categoryId;
      },
    },
  },
  mounted() {
    this.getSubCateList(this.subCategoryId, this.categoryId);
  },
  methods: {
    onChange(index) {
      this.activeKey = index;
      this.subCategoryId = this.subCateList.categoryL2List[this.activeKey].id;
      this.getSubCateList(this.subCategoryId, this.categoryId);
    },
    async getSubCateList(subCategoryId, categoryId) {
      try {
        const result = await reqSubCateList(subCategoryId, categoryId);
        this.subCateList = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    toHome() {
      this.$router.push("/home")
    },
    toSearch() {
      this.$router.push("/search")
    },
    toCart() {
      this.$router.push("/Cart")
    }

  },
};
</script>

<style lang="less" scoped>
@nav-bar-icon-color: #000;
.title {
  font-size: 14px;
  text-align: center;
  line-height: 45px;
  border-top: 10px solid #eee;
  margin-top: 10px 0;
}
</style>
